<template>
	<view class="page-content">
		<view class="search-box">
			<custom-input placeholder="搜索" background="#FFFFFF" @handleSearch="handleSearch"></custom-input>
		</view>
		<view class="" style="overflow-y: auto;flex: 1;">
			<view class="chat-cards" @click="handleToFans">
				<fans-hudong-chat title="粉丝" image="/static/common/fans.png"></fans-hudong-chat>
				<u-line color="#E2E2E2" />
			</view>
			<view class="chat-cards" @click="handleToHudong">
				<fans-hudong-chat title="互动消息" image="/static/common/hudong.png"></fans-hudong-chat>
				<u-line color="#E2E2E2" />
			</view>
			<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in list" :key="index" @click="click"
				@open="open" :options="options" bg-color="transparent">
				<view class="chat-cards" @click="handleToChat(item)">
					<chat-card :chat="item"></chat-card>
					<u-line color="#E2E2E2" />
				</view>
			</u-swipe-action>
			<block v-if="list.length==0"><u-loadmore :status="status" /></block>
		</view>
	</view>
</template>

<script>
	import chatCard from "components/common/card/chat-card.vue";
	import fansHudongChat from "./components/fans_hudong-message_chat.vue";
	import customInput from "components/common/custom-input.vue";
	import mine from "../../api/mine";
	import utils from "../../utils/util.js";
	export default {
		data() {
			return {
				options: [{
						text: '置顶',
						style: {
							backgroundColor: '#64C0F3'
						}
					},
					{
						text: '删除',
						style: {
							backgroundColor: '#F56565'
						}
					}
				],
				list: [],
				status: 'loadmore',
				userinfo: null,
				timer:null
			}
		},
		onShow() {
			if(!this.timer){
				console.log("addtimer");
				this.timer=setInterval(() => {
								this.queryChatList();
							}, 1500)
			}
			this.queryChatList();
		},
		onHide() {
			if(this.timer){
				console.log("cleartimer");
				clearInterval(this.timer);
				this.timer = null; 
			}
		},
		onLoad() {
			const userinfo = uni.getStorageSync('userinfo');
			if (userinfo) {
				this.userinfo = userinfo;
			}
		},
		methods: {
			click(index, index1) {
				if (index1 == 1) {
					this.$u.toast(`删除了第${index}个cell`);
				} else {
					this.$u.toast(`收藏成功`);
				}
				this.list[index].show = false;
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.list[index].show = true;
				this.list.map((val, idx) => {
					if (index != idx) this.list[idx].show = false;
				})
			},
			handleSearch(value) {
				this.list = this.list.filter(item => {
					return item.userNickname.includes(value)
				})
				if (value == '') {
					this.queryChatList();
				}
			},
			handleToFans() {
				uni.navigateTo({
					url: '/pages/news/fans/fans'
				})
			},
			handleToHudong() {
				uni.navigateTo({
					url: '/pages/news/hudong/hudong'
				})
			},
			handleToChat(item) {
				uni.navigateTo({
					url: '/pages/news/user-chat/user-chat?userId=' + item.userId
				})
			},
			queryChatList() {
				this.status = 'loading';
				mine.queryChatList().then(res => {
					if (res.code == 200) {
						this.list = res.rows.map(item => {
							item.lastChatDate = utils.formatMessageDate(new Date(item.lastChatDate).getTime(), 'Y-M-D h:m:s');
							if (item.userAvatar) {
								item.userAvatar = item.userAvatar.split(',')[0]
							}
							if (this.userinfo.id == item.sendId) {
								item.unReadChatNum = 0;
							}
							return item;
						})
					}
					this.status = 'nomore';
				}).catch(err => {
					this.status = 'nomore';
				})
			}
		},
		components: {
			chatCard,
			customInput,
			fansHudongChat
		}
	}
</script>

<style lang="scss" scoped>
	.page-content {
		height: 100%;
		background-color: #F6F6F6;
		display: flex;
		flex-direction: column;

		.search-box {
			padding: 16rpx 32rpx 24rpx 32rpx;
		}

		.chat-cards {
			padding: 0 32rpx;
		}
	}
</style>